<script setup>

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  xml: {
    type: Object,
    default: {}
  }
})
const dialogVisible = computed(() => props.visible)


const emit = defineEmits(['closeDialog'])
const handleClose = () => {
  emit('closeDialog')
  activeName.value = 'flowchart'
}
const activeName = ref('flowchart')

const flowchartSrc = computed(() => props.xml.src || '')
const flowchart_approved_src = computed(() => props.xml.src_approved || '')
const flowchartXML = computed(() => props.xml.str || '')

</script>

<template>
  <div class="dialog-container">
    <el-dialog v-model="dialogVisible" title="流程图" width="80vw" :before-close="handleClose" align-center
      :close-on-click-modal="false" :close-on-press-escape="false" :center="true" :destroy-on-close="true">
      <el-tabs v-model="activeName">
        <el-tab-pane label="流程图" name="flowchart">
          <el-scrollbar height="70vh">
            <el-image :src="flowchartSrc" fit="contain">
              <template #error>
                <div class="image-slot">
                  <el-icon><icon-picture /></el-icon>
                </div>
              </template>
            </el-image>
          </el-scrollbar>
        </el-tab-pane>

        <el-tab-pane v-if="flowchart_approved_src" label="已审批流程图节点" name="flowchart_approved">
          <el-scrollbar height="70vh">
            <el-image :src="flowchart_approved_src" fit="contain">
              <template #error>
                <div class="image-slot">
                  <el-icon><icon-picture /></el-icon>
                </div>
              </template>
            </el-image>
          </el-scrollbar>
        </el-tab-pane>

        <el-tab-pane label="xml" name="xml">
          <el-scrollbar height="70vh">
            <span class="xml-text">{{ flowchartXML }}</span>
          </el-scrollbar>
        </el-tab-pane>
      </el-tabs>

    </el-dialog>
  </div>
</template>


<style lang="scss" scoped>
.xml-text {
  white-space: pre-wrap;
}
</style>